<template>
  <div class="container">
      <div class="handle-box">
          <span style="padding: 8px">姓名：</span>
          <el-input v-model="query.title" placeholder="" class="handle-input mr10" style="width: 20%"></el-input>
    
          <span style="padding: 8px">电话：</span>
          <el-input v-model="query.mobile" placeholder="" class="handle-input mr10" style="width: 20%"></el-input>
          <span style="padding: 8px">地区：</span>
          <el-input v-model="query.descp" placeholder="" class="handle-input mr10" style="width: 20%"></el-input>
          <!-- <span style="padding: 8px">名称：</span>
          <el-input v-model="query.title" placeholder="" class="handle-input mr10" style="width: 20%"></el-input> -->
                
          <el-button type="success" size="medium" icon="el-icon-search" @click="initAjaxMethod">搜索</el-button>
          <!-- <el-button type="warning" size="medium" icon="el-icon-refresh-left" @click="reset">重置</el-button> -->
      </div>
      <div class="roleInput">
          <!-- <el-button type="primary" size="medium" @click="handleAdd" v-if="roulShowList.btn1.type">新建一级类目</el-button> -->
           <!-- <el-button type="primary" size="medium" @click="handleAdd" v-if="roulShowList.btn1.type">添加</el-button> -->
      </div>
      <div>
          <el-table
              :data="tableData"
              style="width: 100%; margin-bottom: 20px"
              row-key="id"
              border
              :default-expand-all="false"
              :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          >
              <el-table-column prop="id" label="" width="80" align="left">
                  <template slot-scope="scope">
                      {{ scope.row ? '' : '' }}
                  </template>
              </el-table-column>
              <el-table-column prop="id" label="ID" align="center"></el-table-column>
             
              <el-table-column prop="realname" label="姓名" align="center"></el-table-column>
              <!-- <el-table-column prop="icon" label="头像" align="center"></el-table-column> -->
              <!-- <el-table-column label="预览"     align="center">
                    <template slot-scope="scope"> -->
                    <!-- <img :src="docLoadPath+scope.row.icon" alt="" style="widht:40px;height:30px;"> -->
                    <!-- <img :src="scope.row.icon" alt="" style="widht:40px;height:30px;">
                    </template>
                </el-table-column> -->


              <el-table-column prop="s_name" label="昵称" align="center" width="160"></el-table-column>
              <el-table-column prop="mobile" label="手机" align="center"></el-table-column>
              <el-table-column prop="descp" label="地区" align="center"></el-table-column>
            
              <el-table-column prop="downnum" label="下级人数" align="center"></el-table-column>
              <!-- <el-table-column prop="own" label="openid" align="center"></el-table-column> -->
              <!-- <el-table-column prop="dnickrname" label="上级" align="center"></el-table-column> -->
              <el-table-column prop="addtime" label="加入时间" align="center"></el-table-column>
        
             
              <!-- <el-table-column prop="issetguwen111" label="开通顾问" align="center">
                <template slot-scope="scope">
                      <el-tag v-if="scope.row.issetguwen == 1" type="success">是</el-tag>
                      <el-tag v-if="scope.row.issetguwen == 0 ||  scope.row.issetguwen == '' " type="info">否</el-tag>
                  </template>
              </el-table-column> -->
             
              <!-- <el-table-column prop="sort" label="加入时间" align="center"></el-table-column> -->
             
             
             
          
                <!-- <el-table-column prop="status" label="推荐到首页" width="100" align="center">
                  <template slot-scope="scope">
                      <el-tag v-if="scope.row.ishot == 1" type="success">是</el-tag>
                      <el-tag v-if="scope.row.ishot == 0" type="info">否</el-tag>
                  </template>
              </el-table-column> -->

              <!-- <el-table-column prop="status" label="是否开启" width="100" align="center">
                  <template slot-scope="scope">
                      <el-tag v-if="scope.row.status == 1" type="success">是</el-tag>
                      <el-tag v-if="scope.row.status == 0" type="info">否</el-tag>
                  </template>
              </el-table-column> -->
              <el-table-column label="操作" align="center" width="420">
                  <template slot-scope="scope">
                      <!-- <el-button
                          icon="el-icon-plus"
                          v-if="scope.row.level == 0 && roulShowList.btn1.type"
                          type="text"
                          @click="handleSecond(scope.row)"
                          >添加二级类目</el-button
                      >
                      <span style="padding: 8px"></span> -->
                      <!-- <el-button  type="text" @click="handleEditcom(scope.row,'changeparent')"
                          >更改上级</el-button> -->
 
<!-- 
                          <el-button type="text" @click="handleEdit(scope.row)"
                          >编辑</el-button> -->
                      <!-- <span style="padding: 8px"></span>
                      <el-switch                         
                          v-model="scope.row.issetguwen == 1 ? true : false"
                          active-color="#13ce66"
                          inactive-color="#eeeeee"
                          active-text="设置顾问"
                          inactive-text="取消顾问"
                          @change="updatesw(scope.row, 1)"
                      >
                      </el-switch> -->
                      <!-- <span style="padding: 8px"></span> -->
                      <!-- <span v-if="roulShowList.btn2.type">
                          <el-popconfirm title="确定删除吗22？" @confirm="handleDelete(scope.row)">
                              <el-button type="text" slot="reference" icon="el-icon-delete" style="color: #f56c6c">删除2</el-button>
                          </el-popconfirm>
                      </span> -->


                  


                    <!-- <el-popconfirm  title="确定删除吗？" @confirm="handleDelete(scope.row.id, scope.row.title)">
                         <el-button type="text" slot="reference" >删除</el-button>
                       </el-popconfirm> -->

                       
        <!-- <el-button @click="handleDelete(scope.row)"
                   type="text"
                   size="small"
                   icon="el-icon-delete"
                   class="red">删除</el-button> -->


                  </template>
              </el-table-column>
          </el-table>
          <div class="pagination">
              <el-pagination
                  layout="sizes,total, prev, pager, next, jumper"
                  :current-page="query.pageIndex"
                  :page-size="query.pageSize"
                  :page-sizes="[10, 20, 50, 100, 150, 200]"
                  @size-change="handleSizeChange"
                  :total="pageTotal"
                  @current-change="handlePageChange"
              ></el-pagination>
          </div>
      </div>
      <!--添加组织名称-->
      <el-dialog title="编辑" :visible.sync="editVisible" width="50%">
          <div class="list-group">
              <div style="padding: 10px">
                  <el-row :gutter="20">
                      <el-col :span="3">
                          <!-- <div class="list-title"><span class="mast-icon">*</span>{{ level == 0 ? '一级' : '二级' }}分类名称:</div> -->
                           <div class="list-title">姓名:</div>
                      </el-col>
                      <el-col :span="18">
                          <el-input v-model="s_name" placeholder="请填写"  show-word-limit></el-input>
                      </el-col>
                  </el-row>
              </div>   

              <div style="padding: 10px">
                  <el-row :gutter="20">
                      <el-col :span="3">
                          <!-- <div class="list-title"><span class="mast-icon">*</span>{{ level == 0 ? '一级' : '二级' }}分类名称:</div> -->
                           <div class="list-title">手机:</div>
                      </el-col>
                      <el-col :span="18">
                          <el-input v-model="mobile" placeholder="请填写"  show-word-limit></el-input>
                      </el-col>
                  </el-row>
              </div>

              <div style="padding: 10px">
                  <el-row :gutter="20">
                      <el-col :span="3">
                          <!-- <div class="list-title"><span class="mast-icon">*</span>{{ level == 0 ? '一级' : '二级' }}分类名称:</div> -->
                           <div class="list-title">地区:</div>
                      </el-col>
                      <el-col :span="18">
                          <el-input v-model="descp" placeholder="请填写"  show-word-limit></el-input>
                      </el-col>
                  </el-row>
              </div>

              <div style="padding: 10px">
                  <el-row :gutter="20">
                      <el-col :span="3">
                          <div class="list-title">备注姓名:</div>
                      </el-col>
                      <el-col :span="18">
                          <el-input v-model="bz_name" placeholder="请填写" show-word-limit></el-input>
                      </el-col>
                  </el-row>
              </div>   
              

              
       
            <div style="padding: 10px">
            <el-row :gutter="20">
                      <el-col :span="3">
                          <div class="list-title">备注信息:</div>
                      </el-col>
                      <el-col :span="18">
                        <el-input v-model="note" :rows="6"
                          type="textarea"></el-input>
                     
                        </el-col>
                  </el-row>


   
        </div>


              
              <!-- <div style="padding: 10px">
                  <el-row :gutter="20">
                      <el-col :span="6">
                          <div class="list-title">是否显示:</div>
                      </el-col>
                      <el-col :span="18">
                        <el-radio-group v-model="ishot">
                            <el-radio :label="1">是</el-radio>
                              <el-radio :label="0">否</el-radio>
                    
                          </el-radio-group>
                      </el-col>
                  </el-row>
                  </div> -->
 
              <!-- <div style="padding: 10px">
                  <el-row :gutter="20">
                      <el-col :span="6">
                          <div class="list-title">图标:</div>
                      </el-col>
                      <el-col :span="18">
                          <img-upload :img-url.sync="img_url"></img-upload>
                          <p style="color: red">图片规格：750*340，大小300kb以内(格式：jpg,jpeg,png,gif,bmp)</p>
                      </el-col>
                  </el-row>
              </div> -->
              <!-- <div style="padding: 10px">
                  <el-row :gutter="20">
                      <el-col :span="6">
                          <div class="list-title">排序:</div>
                      </el-col>
                      <el-col :span="18">
                          <el-input-number v-model="sort" controls-position="right" :min="0" :max="10"></el-input-number>
                      </el-col>
                  </el-row>
              </div> -->


              

          </div>
          <span slot="footer" class="dialog-footer">
              <el-button size="medium" @click="editVisible = false">取 消</el-button>
              <el-button size="medium" type="primary" @click="saveEdit">确 定</el-button>
          </span>
      </el-dialog>

      <!-- 修改上级 -->

      <el-dialog title="更改上级" :visible.sync="editVisiblechangeparet" width="50%">
          <div class="list-group">
              <div style="padding: 10px">
                  <el-row :gutter="20">
                      <el-col :span="6">
                          <!-- <div class="list-title"><span class="mast-icon">*</span>{{ level == 0 ? '一级' : '二级' }}分类名称:</div> -->
                           <div class="list-title">上级用户凭证:</div>
                      </el-col>
                      <el-col :span="18">
                          <el-input v-model="dad" placeholder="请填写" show-word-limit></el-input>
                      </el-col>
                  </el-row>
              </div>   
              

              
              <!-- <div style="padding: 10px">

                  <el-row :gutter="20">
                      <el-col :span="6">
                          <div class="list-title">是否显示:</div>
                      </el-col>
                      <el-col :span="18">
                        <el-radio-group v-model="ishot">
                            <el-radio :label="1">是</el-radio>
                              <el-radio :label="0">否</el-radio>
                    
                          </el-radio-group>
                      </el-col>
                  </el-row> 
                  </div> -->


              

          </div>
          <span slot="footer" class="dialog-footer">
              <el-button size="medium" @click="editVisiblechangeparet = false">取 消</el-button>
              <el-button size="medium" type="primary" @click="saveEditcom">确 定</el-button>
          </span>
      </el-dialog>


  </div>
</template>

<script>
import api from '@/api/index';
import imgUpload from '../../commons/ImgUpload';
import { getdate } from '@/utils/utils';
import _ from 'lodash';
import axios from "axios";
export default {
  components: { imgUpload },
  data() {
      return {
          rbacTitle: '',
          editOrAdd: 1,
          editVisible: false,
          editVisiblechangeparet: false,
          tableData: [],
          cascaderData: [],
          options: [],
          dad: '',
          todo: '',
          description2: '',
          parent_id: 0,
          title: '',
          img_url: '',
          s_name: '',
          mobile:'',
          descp:'',
          bz_name:'',
          note:'',
          id: null,
          query: {
              pageIndex: 1,
              pageSize: 10,
              title: ''
          },
          pageTotal: 0,
          level: 0,
          roulShowList: {
              btn1: { rule: 'tagmanage,main,add', type: true, name: '新增' },
              btn2: { rule: 'tagmanage,main,del', type: true, name: '删除' },
              btn3: { rule: 'tagmanage,main,edit', type: true, name: '编辑' },
              btn4: { rule: 'tagmanage,main,edit_disabled', type: true, name: '禁用' },
              btn5: { rule: 'tagmanage,main,edit_warn', type: true, name: '告警' }
          },
          todo:'',
      };
  },
  filters: {
      formDate(val) {
          if (!val) return '';
          return getdate(val);
      }
  },
  mounted() {
      this.initAjaxMethod();
      // this.roleMethod()
  },
  methods: {
      reset() {
          this.query.pageIndex = 1;
          this.query.title = '';
          this.initAjaxMethod();
      },
      // 分页导航
      handlePageChange(val) {
          this.$set(this.query, 'pageIndex', val);
          this.initAjaxMethod();
      },
      handleSizeChange(e) {
          this.query.pageSize = e;
          this.initAjaxMethod();
      },
      //初始化页面列表
      initAjaxMethod() {
          const loading = this.$loading({ text: '加载中...' });
          this.$http
              .post(api.tianshi_INDEX, {
                  page: this.query.pageIndex,
                  listRows: this.query.pageSize,
                  title: this.query.title,
                  mobile:this.query.mobile,
                  descp:this.query.descp

              })
              .then((res) => {
                  loading.close();
                  if (res.code == 1) {
                      let list = Array.isArray(res.data.list) ? res.data.list : [];
                      // list.forEach((item) => {
                      //     item.childrenNum = 0;
                      //     if (Array.isArray(item.children) && item.children.length > 0) {
                      //         item.childrenNum = item.children.length;
                      //     }
                      // });
                      this.tableData = list;
                      this.pageTotal = res.data.total;
                  } else {
                      this.$message.error(res.msg);
                  }
              })
              .catch((err) => {
                  this.$message.error(err.msg);
              });
      },
      //新增
      handleAdd() {
          this.editVisible = true;
          this.editOrAdd = 1;
          this.parent_id = 0;
          this.title = '';
           this.description3 = '';   
          this.description = '';  
          this.description2 = '';  
          this.img_url = '';
          this.sort = 0;
          this.id = null;
          this.rbacTitle = '新增';
          this.level = 0;
      },
      //点击编辑
      handleEdit(data) {
          console.log(data);
          this.editVisible = true;
          this.editOrAdd = 2;
          this.id = data.id;
          this.s_name = data.s_name;
          this.bz_name = data.bz_name;
          
          this.mobile = data.mobile;
          this.descp = data.descp;
          this.note = data.note;
    
        //   this.img_url = data.img_url;
     
           
      },
  
      //弹出框确定
      saveEdit() {
          if (!this.title || this.title == '') {
            //   return this.$message.error('请填写分类名称!');
          }
          let parmam = {
              s_name: this.s_name,
              bz_name: this.bz_name,
              note :this.note, 
              img_url: this.img_url,
              detail: '新增：' + this.title
          };
          let url = api.goodscate_ADD;
          if (this.editOrAdd == 2) {
              parmam.id = this.id;
              parmam.detail = '编辑：' + this.title;
              url = api.tianshi_EDIT;
          }
          const loading = this.$loading({ text: '保存中...' });
          this.$http
              .post(url, parmam)
              .then((res) => {
                  loading.close();
                  console.log('新增规则', res);
                  if (res.code == 1) {
                      this.$message.success('操作成功');
                      this.editVisible = false;
                      this.initAjaxMethod();
                  } else {
                      this.$message.error(res.msg);
                  }
              })
              .catch((err) => {
                  this.$message.error(err.msg);
              });
      },
  
      handleEditcom(data,type) {
          console.log(data);
          this.editVisiblechangeparet = true;
          this.editOrAdd = 2;
          this.id = data.id;
          this.todo = type;
        //   this.title = data.title; 
      },

        
      //弹出框确定
      saveEditcom() {
        //   if (!this.title || this.title == '') {
        //       return this.$message.error('请填写分类名称!');
        //   }
          let parmam = {
              dad: this.dad,
              todo: this.todo,
              
              detail: '新增：' + this.title
          };
          let url = api.goodscate_ADD;
          if (this.editOrAdd == 2) {
              parmam.id = this.id;
              parmam.detail = '编辑：' + this.title;
              url = api.tianshi_changeparent;
          }
          const loading = this.$loading({ text: '保存中...' });
          this.$http
              .post(url, parmam)
              .then((res) => {
                  loading.close();
                  console.log('新增规则', res);
                  if (res.code == 1) {
                      this.$message.success('操作成功');
                      this.editVisiblechangeparet = false;
                      this.initAjaxMethod();
                  } else {
                      this.$message.error(res.msg);
                  }
              })
              .catch((err) => {
                  this.$message.error(err.msg);
              });
      },
  
      //点击删除
    
      //删除
      handleDelete(data){
      this.delAjaxMethod(data.id);
      },

   delAjaxMethod(ids){
    this.$confirm('此操作将删除此条信息, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      const loading = this.$loading({ text: '加载中...' });
      this.$http.post(api.goodscate_DEL, {ids:ids})
            .then((res) => {
              loading.close();
              console.log('项目列表', res)
              if (res.code == 1) {
                this.$message.success('删除成功');
                this.query.pageIndex=1;
                this.initAjaxMethod()
              } else {
                this.$message.error(res.msg);
              }
            })
            .catch((err) => {
              this.$message.error(err.msg);
            })
    })
  },


  updatesw(data, flag) {

    console.log("sfsdf",data);
            let url = '',
                status = '',
                detail = '';
            if (flag == 1) {
                status = data.issetguwen == 0 ? 1 : 0;
                url = api.tianshi_setguwen;
                detail = '标签' + data.title + ':' + (data.status == 0 ? '启用' : '停用');
            } else if (flag == 2) {
                status = data.iswarn == 0 ? 1 : 0;
                url = this.$API.ARTICLE_TAG_WARN;
                detail = '标签' + data.title + ':' + (data.iswarn == 0 ? '警示' : '撤销警示');
            }
          
            const loading = this.$loading({ text: '保存中...' });
            // this.$http.post(api.goodscate_DEL, {ids:ids})
            this.$http
                .post(url, { id: data.id, status, detail })
                .then((res) => {
                    loading.close();
                    if (res.code == 1) {
                        this.$message.success('操作成功');
                        this.initAjaxMethod();
                    } else {
                        this.$message.error(res.msg);
                    }
                })
                .catch((err) => {
                    this.$message.error(err.msg);
                });
        },


      roleMethod() {
          this.$http.post(this.$API.GET_TRR_PAGE, { rule: 'tagmanage,main' }).then((res) => {
              console.log('页面权限', res);
              if (res.data === 'admin') {
                  for (let i in this.roulShowList) {
                      this.roulShowList[i].type = true;
                  }
              } else {
                  res.data.forEach((item) => {
                      for (let j in this.roulShowList) {
                          if (item.rule == this.roulShowList[j].rule) {
                              this.roulShowList[j].type = true;
                          }
                      }
                  });
              }
          });
      }
  }
};
</script>


<style scoped>
.roleInput {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 20px 0;
}
.list-title {
  /* padding:7px; */
  height: 32px;
  display: flex;
  align-items: center;
}
</style>